<!--景区列表-->
<script src="../../../utils/index.js"></script>
<template>
    <div class="mod-datasource">
        <div style="background: #fff; width: 100%; padding: 15px 15px 0 15px; height: 170px">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" size="small">
               <el-form-item label="景区编号:">
                   <el-input v-model.trim="dataForm.spotId" placeholder="景区编号" clearable class="inputWidth"  oninput="value=value.replace(/[^\d]/g,'')"></el-input>
               </el-form-item>
                <el-form-item label="产品名称:">
                    <el-input v-model.trim="dataForm.resourceName" placeholder="产品名称" clearable class="inputWidth"></el-input>
                </el-form-item>
               <el-form-item label="景区名称:">
                   <el-input v-model.trim="dataForm.spotName" placeholder="景区名称" clearable class="inputWidth"></el-input>
               </el-form-item>
                <el-form-item label="状态:">
                    <el-select v-model="dataForm.resourceStatus" placeholder="全部" clearable>
                        <el-option label="上架中" :value="1"></el-option>
                        <el-option label="下架中" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地区:">
                    <el-select v-model="dataForm.cityId" filterable placeholder="请选择景点所在的城市" clearable>
                        <el-option v-for="item in cityList" :key="item.cityId" :label="item.cityName" :value="item.cityId"></el-option>
                    </el-select>
               </el-form-item>
                <el-form-item label="供应商:">
                    <el-select v-model="dataForm.sourceFrom" placeholder="全部" clearable>
                        <el-option v-for="item in supplierList" :key="item.supplierCode" :label="item.supplierName" :value="item.supplierCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button @click="queryReset()" size="small">重置</el-button>
                    <el-button @click="getDataList()" type="primary" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
            <el-table v-loading="dataListLoading" :data="dataList" style="width: 100%" :height="tableHeight" @sort-change="dataListSortChangeHandle" :header-cell-style="{background: '#DBEDF6'}">
                <el-table-column prop="goodsId" label="门票编号" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="orderStatus" label="景区信息" header-align="center" align="center">
                    <template slot-scope="scope">
                        <div>名称:{{scope.row.spotName}}</div>
                        <div>编号:{{scope.row.spotId}}</div>
                    </template>
                </el-table-column>

                <el-table-column prop="orderStatus" label="门票基本信息" header-align="center" align="center">
                  <template slot-scope="scope">
                        <div>名称:{{scope.row.resourceName}}</div>
                        <div>平台卖价:{{scope.row.ypkPrice}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="sourceFrom" label="来源" header-align="center" align="center"></el-table-column>
                <el-table-column prop="resourceStatus" label="状态" header-align="center" align="center" min-width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.resourceStatus == '0' ? '已下架' : '已上架'}}</span>
                    </template>
                </el-table-column>
               <el-table-column label="操作" header-align="center" align="center" width="150">
                 <template slot-scope="scope">
                   <el-button type="text" size="small" v-if="scope.row.resourceStatus == 0" @click="updataFun(scope.row.id,scope.row.resourceStatus)">上架</el-button>
                   <el-button type="text" size="small" v-if="scope.row.resourceStatus == 1" @click="updataFun(scope.row.id,scope.row.resourceStatus)">下架</el-button>

<!--                   <el-button type="text" size="small" @click="checkItem(scope.row.id)">查看</el-button>-->
                   <el-button v-if="scope.row.resourceStatus == 0" type="text" size="small" @click="edit(scope.row.id)">编辑</el-button>
                 </template>
               </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="limit"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="pageSizeChangeHandle"
                    @current-change="pageCurrentChangeHandle">
            </el-pagination>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span>是否{{updataText}}该产品</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="updataClick">确 定</el-button>
            </span>
          </el-dialog>
        </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/resource/getResourceList',
        getDataListIsPage: true,
        deleteURL: '/devtools/datasource',
        deleteIsBatch: true
      },
      dataForm: {
        spotId: undefined,
        spotName: undefined,
        spotStatus: undefined,
        cityId: undefined,
        resourceStatus: undefined,
        resourceName: undefined
      },
      cityList: [],
      supplierList: [],
      tableHeight: null,
      date: [],
      isNoteCheck: false,
      dataNote: [],
      dialogVisible: false,
      updataText: undefined,
      id: undefined
    }
  },
  components: {
  },
  watch: {
    date (newVal, oldVal) {
      console.log('newVal', newVal)
      if (newVal == null) {
        this.dataForm.beginSettlementDate = null
        this.dataForm.endSettlementDate = null
      } else {
        this.dataForm.beginSettlementDate = newVal[0]
        this.dataForm.endSettlementDate = newVal[1]
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.tableHeight = document.documentElement.clientHeight - 310
    })
    this.getCityList()
    this.getSupplierList()
  },
  methods: {
    getSupplierList () {
      this.$http.get('/form/getScenicSuppliers').then(res => {
        if (res.data.code !== 0) {
          return this.$message.error(res.data.msg)
        }
        this.supplierList = res.data.data
      })
    },
    getCityList () {
      this.$http.get('/form/getScenicCities').then(res => {
        if (res.data.code !== 0) {
          return this.$message.error(res.data.msg)
        }
        console.log('r===============',res);
        this.cityList = res.data.data
      })
    },
    updataFun (id, status) {
      this.id = id
      status == '0' ? this.updataText = '上架' : this.updataText = '下架'
      this.dialogVisible = true
    },
    updataClick () {
      this.$http.get('/resource/updateResourceStatus', { params: { id: this.id } }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.dialogVisible = false
          this.getDataList()
          return this.$message.success(res.msg)
        }
      }).catch(() => {})
    },
    queryReset () {
      this.dataForm = {}
      this.date = null
      this.getDataList()
    },
    // 编辑
    edit (id) {
      // this.$router.push('/product/edit/' + id + '/product')
        this.$router.push('/product/edit/' + id + '/product')
    },
    // // 查看
    // checkItem (id) {
    //   this.$router.push('/product/detail/' + id)
    // }
  }
}
</script>
<style scoped>

</style>
